<!--
 * @Author: your name
 * @Date: 2021-12-29 21:52:08
 * @LastEditTime: 2022-01-05 18:40:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-ui\src\pages\am\monitor\Monthly.vue
-->
<template>
  <div>
    <div class="content">
      <div class="left">
        <el-tree :data="edTree" :props="props" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <div v-show="params.device_id">
          <el-form inline size="small" :model="params">
            <!-- 日期选择部份 -->
            <el-form-item>
              <el-date-picker v-model="params.date" type="month" value-format="yyyy-MM"></el-date-picker>
            </el-form-item>
            <!-- 按钮部份 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="toSearchHandler" type="primary" size="small" class="btn">搜索</el-button>
              <el-button type="primary" size="small">下载<i class="el-icon-download el-icon--right" ></i></el-button>
            </el-form-item>
          </el-form>

          <!-- 表格部份 -->
          <el-table :data="resData" size="small">
            <el-table-column label="日期" prop="d" width="150" align="center"></el-table-column>
            <el-table-column label="tsp" prop="tsp" width="80" align="center"></el-table-column>
            <el-table-column label="pm10" prop="pm10" width="80" align="center"></el-table-column>
            <el-table-column label="pm2.5" prop="pm25" width="80" align="center"></el-table-column>
            <el-table-column label="温度" prop="temperature" width="80" align="center"></el-table-column>
            <el-table-column label="湿度" prop="humidity"  width="80" align="center"></el-table-column>
            <el-table-column label="噪音" prop="noise" width="80" align="center"></el-table-column>
            <el-table-column label="风速" prop="wind_speed" width="80" align="center"></el-table-column>
            <el-table-column label="风向" prop="wind_direction" width="80" align="center"></el-table-column>
          </el-table> 
        </div>
        <div v-show="params.device_id == null" class="notice">请选择设备</div>
    </div>
    </div>
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  // 变量
  data(){
    return {
      props:{
          label:"name",
          value:"id",
      },
      edTree:[],
      params:{},
      resData:[]
    }
  },  
  // 方法
  methods:{
    // 监测月报
    QueryMonitorData(){
      get("/monitor/queryMouthData",this.params).then(res => {
        this.resData = res.data;
      })
    },
    handleNodeClick(data){
            if(data.engineer_id){
              this.params = {
              ...this.params,
              engineer_id:data.engineer_id,
              device_id: data.id,
              };
          // 调用查找月报数据的方法
         this.QueryMonitorData();
      };
    },
    // 加载工程设备树
    FindEngineerDevices(){
      get("/engineer/findEngineerDeviceTree").then(res => {
        this.edTree = res.data;
      })
    },
    toSearchHandler() {
       this.QueryMonitorData();
    }
  },
  // 页面加载完毕后执行
  created() {
    this.FindEngineerDevices();
  },
}
</script>

<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
.div {
  display: flex;
}
.btn {
  margin-left: 10px;
  margin-top: 3px;
  margin-right: 380px;
}
</style>
